<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分类选择</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/css.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
</head>

<body>
<style>
    [v-cloak] {
        display: none;
    }

    canvas {
        margin: 20px auto;
        display: block;
    }

    html, body {
        background: #000 !important;
    }

    #app {
        background: #000;
    }

    .nears {
        display: flex;
        justify-content: center;
        align-items: center;
        /*padding-top: 100px;*/
        width: 100%;
        /*background: #fff;*/
        padding-top: 30px;

    }

    #can {
        width: 100%;
    }

    .footers {
        display: flex;
        bottom: 10px;
        width: 94%;
        margin: auto;
        left: 3%;
        position: fixed;
        justify-content: flex-end;
        align-items: center;
        height: 20px;
        margin-bottom: 10px;
        z-index: 100000;

    }

    /*.quxiao {*/
    /*border: 1px solid #666666;*/
    /*padding: 5px 10px;*/
    /*color: #fff;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*font-size: 14px;*/
    /*}*/

    #app {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    #can {
        width: 300px;
        height: 300px;
        margin: auto;
    }

    .listcan {
        position: fixed;
        left: 10%;
        width: 80%;
        z-index: 1000;
        color: #fff;
        height: 100%;
        height: 300px;
        background: none;
    }

    .youhu {
        width: 80px;
        height: 80px;
        position: absolute;
    }

    .youhu img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    #c1 {
        width: 100%;
        height: 100%;
        /*height: 0px;*/
    }

    .swiper-container {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 50px;
        position: relative;
        bottom: 20px;
    }

    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 150px;
        height: 180px;
    }

    .card_img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 10px auto;
        display: block;
    }

    .cards {
        background: rgba(255, 255, 255, 0.8);
        border-radius: 5px;
    }

    .dzh {
        width: 100px;
        height: 30px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #9e59f8;
        margin: 10px auto;
    }

    .dian {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #9e59f8;
    }

    .dian2 {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #ff91a2;
    }

    .jl {
        text-align: center;
        margin-bottom: 0;
    }

    .jl i {
        color: #999;
        margin-right: 5px;
    }

    .h100 {
        height: 100px;
    }


    .yuehui {
        width: 80px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #F56C6C;
        color: #fff;
        font-size: 14px;
        border-radius: 10px;
    }

    .yuehui.quxiao {
        color: #FFFFFF;
        background: #3c3b43;
    }


</style>
<div v-cloak id="app">
    <div class="nears">
        <canvas id="can" height=300 width=300></canvas>
        <div class="listcan">
            <div class="youhu" v-for="(item,index) in list" @click="goDetail(item.id)"
                 :style="{left: item.left + 'px',top: item.top + 'px'}">
                <div v-if="index%2==0" class="dian"></div>
                <div v-else class="dian dian2"></div>
                <!--<img src="" alt="">-->
            </div>
        </div>
    </div>
    <div class="swiper-container" ref="goodSwiper">
        <div class="swiper-wrapper">
            <div v-for="(item,index) in list" :key="index" class="swiper-slide cards">
                <img v-if="isyuehui" class="card_img" :src="item.thumb|filtersImg" alt="">
                <div v-else class="h100"></div>
                <p class="jl"><i class="icon iconfont icon-location"></i>{{item.distance}}</p>
                <span class="dzh" @click="goDetail(item.id)">打招呼</span>
            </div>
        </div>
    </div>
    <div class="footers">
        <!--<div class="quxiao" @click="huanyihuan">换一换</div>-->
        <div v-if="!isyuehui" @click="yuehuiis" class="yuehui">我要约会</div>
        <div v-else @click="yuehuiis" class="quxiao yuehui">取消约会</div>
    </div>
</div>
</body>

</html>
<script type="text/javascript" src="../aui/js/aui.js"></script>
<script src="../script/vue2.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script src="../script/swiper-3.3.1.min.js"></script>
<script type="text/javascript">
    apiready = function () {
        var vm = new Vue({
            el: "#app",
            data: {
                list: [],
                page: 1,
                bMap: '',
                isyuehui: false,
                goodVisibility: true,
                nonew: false
            },
            mounted: function () {
                var that = this;
                var token = $api.getStorage('userInfo').token

                if (!isLogin) {
                    toLogin()
                } else {
                    this.getlocal()
                }
                that.getrefUserinfo()
                // 监听热更新
                api.addEventListener({
                    name: 'hhxx'
                }, function (ret, err) {
                    that.getlocal()
                });
            },
            methods: {
                getcan: function () {

                },
                huanyihuan: function () {
                    this.page += 1
                    this.getlocal()
                },
                goDetail: function (e) {
                    var that = this;
                    if (!that.isyuehui) {
                        api.toast({msg: '请开启约会', location: 'middle'});
                    } else {
                        api.openWin({
                            name: 'reg',
                            url: 'widget://html/appointment/yuehuidetail.html',
                            slidBackType: 'edge',
                            vScrollBarEnabled: false,
                            slidBackEnabled: false,
                            pageParam: {
                                id: e
                            }
                        })
                    }
                },
                // 约会开关
                yuehuiis: function () {
                    var that = this;
                    var token = $api.getStorage('userInfo').token
                    console.log(token);
                    api.ajax({
                        url: ajaxRoute.onlocation,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                is_location: !that.isyuehui ? 1 : 0,
                            }
                        }
                    }, function (ret, err) {
                        if (ret.code == 1) {
                            that.isyuehui = !that.isyuehui
                            that.list[0].status = !that.list[0].status
                            that.$nextTick(function () {
                                that.swipes()
                            });
                            api.toast({msg: ret.msg, location: 'middle'});
                        } else {
                            api.hideProgress();
                            api.toast({msg: ret.msg, location: 'middle'});
                        }
                    });
                },
                getlocal: function () {
                    var that = this;
                    var bMap = api.require('bMap');
                    if (api.systemType == "ios") {
                        bMap.getLocationServices(function (ret, err) {
                            if (ret.authorizationStatus == 'denied') {
                                api.alert({
                                    title: '未开启定位功能!',
                                    msg: '请在手机设置中打开定位功能',
                                });
                            } else {
                                bMap.initMapSDK(function (ret) { //ios初始化
                                    if (ret.status) {
                                        bMap.getLocation({ //定位
                                            accuracy: '10m',
                                            autoStop: true,
                                            filter: 100
                                        }, function (ret, err) {
                                            if (ret.status) {
                                                that.lat = ret.lat;
                                                that.lng = ret.lon;
                                                that.getList(1)
                                            } else {
                                                that.getlocal()
                                                // alert(err.msg);
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    } else {
                        bMap.getLocationServices(function (ret, err) {
                            console.log(JSON.stringify(ret));
                            console.log("定位返回信息");
                            if (!ret.enable) {
                                api.alert({
                                    title: '未开启定位功能!',
                                    msg: '请在手机设置中打开定位功能',
                                });
                            } else {
                                bMap.getLocation({ //定位
                                    accuracy: '10m',
                                    autoStop: true,
                                    filter: 100
                                }, function (ret, err) {
                                    if (ret.status) {
                                        that.lat = ret.lat;
                                        that.lng = ret.lon;
                                        that.getList(1)
                                    } else {
                                        that.getlocal()
                                        // alert(err.msg);
                                    }
                                });
                            }
                        });
                    }
                    // setInterval(function () {
                    //     that.getlocal()
                    // }, 300000);
                },
                onLoad2: function () {
                    // 异步更新数据
                    var that = this
                    if (that.finished) {
                        return
                    }
                    that.page++
                    setTimeout(function () {
                        that.getaccountlist2();
                    }, 500);
                },

                getrefUserinfo: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    console.log(token);
                    api.ajax({
                        url: ajaxRoute.center,
                        method: 'post',
                        data: {
                            values: {
                                token: token
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.hideProgress();
                            that.isyuehui = res.data.onlocation
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                getmakemeeting: function () {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.makemeeting,
                        method: 'post',
                        data: {
                            values: {
                                token: token
                            }
                        }
                    }, function (res, err) {
                        if (res.code == 1) {
                            api.toast({msg: '发布成功', location: 'middle'});
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
                swipes: function () {
                    var that = this;
                    if (that.nonew) {
                        var swiper = new Swiper('.swiper-container', {
                            observer: true,
                            observeParents: true,
                            effect: 'coverflow',
                            grabCursor: true,
                            centeredSlides: true,
                            slidesPerView: 'auto',
                            loop: true,
                            coverflow: {
                                rotate: 50,
                                stretch: 0,
                                depth: 100,
                                modifier: 1,
                                slideShadows: true
                            },
                        });
                    } else {
                        var swiper = new Swiper('.swiper-container', {
                            observer: true,
                            observeParents: true,
                            effect: 'coverflow',
                            grabCursor: true,
                            centeredSlides: true,
                            slidesPerView: 'auto',
                            coverflow: {
                                rotate: 50,
                                stretch: 0,
                                depth: 100,
                                modifier: 1,
                                slideShadows: true
                            },
                            onReachEnd: function (swiper) {
                                that.page++
                                that.getList()
                            }
                        });
                    }
                },
                getList: function (type) {
                    var that = this;
                    showProgress();
                    var token = $api.getStorage('userInfo').token
                    api.ajax({
                        url: ajaxRoute.selectnearby,
                        method: 'post',
                        data: {
                            values: {
                                token: token,
                                lng: that.lng,
                                lat: that.lat,
                                page: that.page
                            }
                        }
                    }, function (res, err) {
                        console.log(that.page);
                        console.log(that.lng);
                        console.log(token);
                        console.log(that.lat);
                        if (res.code == 1) {
                            console.log(JSON.stringify(res))
                            api.hideProgress();
                            if (type == 2) {
                                api.refreshHeaderLoadDone()
                            }
                            if (res.data.length == 0) {
                                // api.toast({msg: '暂无用户', location: 'middle'});
                                that.page--
                                that.nonew = true
                            }
                            var sss = that.list

                            for (var i = 0; i < res.data.length; i++) {
                                var k = {}
                                k.thumb = res.data[i].thumb
                                k.id = res.data[i].id
                                k.top = suiji(i + 1)
                                k.left = suiji(i + 1)
                                k.distance = res.data[i].distance
                                k.status = false
                                sss.push(k)
                            }
                            that.list = sss
                            console.log(JSON.stringify(that.list));
                            if (that.list.length == 0) {
                                api.toast({msg: '搜索中，请耐心等待', location: 'middle'});
                            }
                            that.$nextTick(function () {
                                that.swipes()
                            });
                            console.log(JSON.stringify(that.list));
                        } else {
                            api.hideProgress();
                            api.toast({msg: res.msg, location: 'middle'});
                        }
                    });
                },
            },
            filters: {
                filtersImg: function (img) {
                    var imgs = ajaxUrl + '/' + img
                    console.log(imgs)
                    return imgs;
                }
            },
        })
        var that = this;
        var CFG = {
            perDeg: 1,
        };
        scale = 6;
        var can = document.getElementById('can');
        can.width = can.width * scale;
        can.height = can.height * scale;
        var ctx = can.getContext('2d');
        var deg = 0;
        ctx.strokeStyle = 'rgba(0,255,0,1)';

        function init() {
            ctx.fillStyle = 'rgba(0,50,0,1)';
            ctx.arc(150 * scale, 150 * scale, 150 * scale, 0, 2 * Math.PI);
            ctx.fill();
            var raf = window.requestAnimationFrame(loop);
        }

        function loop() {
            deg = (deg + CFG.perDeg);
            cover();
            drawPosLine();
            drawRadar(deg);
            raf = window.requestAnimationFrame(loop);
        }

        function cover() {
            ctx.save();
            ctx.fillStyle = 'rgba(0,0,0,0.02)';
            ctx.arc(150 * scale, 150 * scale, 150 * scale, 0, 2 * Math.PI);
            ctx.fill();
            ctx.restore();
        }

        function suiji(s) {
            return Math.floor(Math.random() * 180) + (s * 20)
        }

        function drawPosLine() {
            // ctx.beginPath();
            // ctx.moveTo(150 * scale, 0);
            // ctx.lineTo(150 * scale, 300 * scale);
            // ctx.closePath();
            // ctx.stroke();

            // ctx.beginPath();
            // ctx.moveTo(0, 150 * scale);
            // ctx.lineTo(300 * scale, 150 * scale);
            // ctx.closePath();
            // ctx.stroke();

            ctx.moveTo(150 * scale, 150 * scale);
            ctx.beginPath();
            // ctx.arc(canvas.width / 2, canvas.height / 2, 800, 0 * Math.PI, 2 * Math.PI);
            // cxt.lineWidth = scale*16;
            ctx.arc(150 * scale, 150 * scale, 100 * scale, 0 * Math.PI, 2 * Math.PI);
            ctx.closePath();
            ctx.stroke();

            ctx.moveTo(150 * scale, 150 * scale);
            ctx.beginPath();
            ctx.arc(150 * scale, 150 * scale, 50 * scale, 0 * Math.PI, 2 * Math.PI);
            ctx.closePath();
            ctx.stroke();
        }

        function drawRadar(iDeg) {
            ctx.fillStyle = 'rgba(0,200,0,.7)';
            ctx.beginPath();
            ctx.moveTo(150 * scale, 150 * scale);
            ctx.arc(150 * scale, 150 * scale, 150 * scale, (-2 * CFG.perDeg + iDeg) / 180 * Math.PI, (0 + iDeg) / 180 * Math.PI);
            ctx.closePath();
            ctx.fill();
        }

        init();
    }
</script>
